<template>
  <div class="wrap">
    <header>
      <div class="headertop">
        <div class="header-img">
          <v-back></v-back>
        </div>
        <h1>
          <v-title></v-title>
        </h1>
        <div class="topradius">
          <i class="iconfont icon-xiaochengxu-gengduo"></i>
          <i class="topborder"></i>
          <i class="iconfont icon-xiaochengxu-guanbi"></i>
        </div>
      </div>
      <nav class="head-nav">
        <ul>
          <li><a href="">全部(20)</a></li>
          <li><a href="">降价(4)</a></li>
          <li><a href="">常卖(2)</a></li>
          <li><a href="">分类</a></li>
        </ul>
      </nav>
    </header>
    <div class="shop-con">
      <div class="shop-contop">
        <div>
          <input type="checkbox" name="" id="all" class="tui-checkbox" />
          <label for="all" class="shop-label">小U自营</label>
        </div>
        <p>以免运费 <span>|</span> <i>领券</i></p>
      </div>
      <div v-if="cartlist" class="shop-concon">
        <van-swipe-cell v-for="item in cartlist" :key="item.id">
          <div class="shop-infor">
            <input type="checkbox" name="" id="all" class="tui-checkbox" />
            <img :src="item.img" alt="" />
            <div class="inf-txt">
              <p>水肌美男士清爽控油洗面奶...</p>
              <p>净透毛孔，温和不紧绷，清爽控...</p>
              <p>粉色 50ML</p>
              <p>比加入时降低￥100</p>
              <div class="money">
                <p><i>￥</i>999<b>￥1099</b></p>
                <p><b>─</b><span>1</span><b>+</b></p>
              </div>
            </div>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              @click="del(item.id)"
            />
          </template>
        </van-swipe-cell>
      </div>
      <div v-else><h1>购物车是空的 请添加商品</h1></div>
    </div>
    <footer>
      <div class="shop-all">
        <div class="qx">
          <input type="checkbox" name="" id="all" class="tui-checkbox" />
          <label for="all" class="shop-label">全选</label>
        </div>
        <div class="allmoeny">
          <div class="allmoeny-left">
            <p>合计</p>
            <p>已免运费</p>
          </div>
          <div class="allmoeny-right">
            <p>￥1998</p>
            <p>已优惠￥200元</p>
          </div>
        </div>
        <div class="js">结算</div>
      </div>
    </footer>
  </div>
</template>

<script>
import { cartlist, cartdelete } from "../request/api";
export default {
  data() {
    return {
      // islogin: {},
      cartlist: [],
    };
  },
  mounted() {
    cartlist({
      uid: JSON.parse(sessionStorage.getItem("islogin")).uid,
    }).then((res) => {
      // console.log(res, "购物车");
      if (res.data.code == 200) {
        this.cartlist = res.data.list;
        // console.log(this.cartlist);
      }
    });
  },
  methods: {
    del(id) {
      cartdelete({ id }).then((res) => {
        console.log(res, "删除");
      });
      cartlist({
        uid: JSON.parse(sessionStorage.getItem("islogin")).uid,
      }).then((res) => {
        // console.log(res, "购物车");
        if (res.data.code == 200) {
          this.cartlist = res.data.list;
          console.log(this.cartlist);
        }
      });
    },
  },
};
</script>

<style scoped>
.goods-card {
  margin: 0;
  background-color: #fff;
}

.delete-button {
  height: 100%;
}
.head-nav {
  background-image: linear-gradient(180deg, #ff6040 0%, #ff8a80 100%);
  box-shadow: 0 2px 6px 0 rgba(255, 149, 128, 0.5);
  padding: 0 0.2rem;
}
.head-nav ul {
  height: 0.72rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.head-nav li {
  align-self: stretch;
  display: flex;
}
.head-nav ul a {
  position: relative;
  color: #fff;
  font-size: 0.32rem;
  align-self: stretch;
  padding-top: 0.2rem;
}
.head-nav ul a:hover {
  font-weight: bold;
}
.head-nav ul li:hover a:after {
  content: "";
  display: block;
  width: 0.4rem;
  height: 0.06rem;
  background: #fff;
  position: absolute;
  left: 50%;
  margin-left: -0.2rem;
  bottom: 0;
}

.shop-con {
  background-color: #f2f2f2;
}
.shop-contop {
  background-color: #fff;
  height: 0.72rem;
  display: flex;
  padding: 0 0.2rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.2rem;
}
.tui-checkbox:checked {
  border-color: #ff6040;
}
.tui-checkbox {
  width: 0.28rem;
  height: 0.28rem;
  background: #f2f2f2;
  border: solid 1px #999999;
  outline: none;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  -webkit-appearance: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-transition: background-color ease 0.1s;
  transition: background-color ease 0.1s;
}
.tui-checkbox:checked::after {
  content: "";
  top: 50%;
  left: 50%;
  margin-top: -0.08rem;
  margin-left: -0.08rem;
  position: absolute;
  background: #ff6040;
  border-top: none;
  border-right: none;
  height: 0.16rem;
  width: 0.16rem;
  border-radius: 50%;
}

.shop-label {
  font-size: 0.32rem;
  color: #333333;
  line-height: 0.32rem;
  margin-left: 0.22rem;
}
.shop-contop p {
  font-size: 0.24rem;
  color: #333333;
  line-height: 0.24rem;
}
.shop-contop p span {
  color: #979797;
}
.shop-contop p i {
  font-size: 0.24rem;
  color: #ff6040;
  line-height: 0.24rem;
}

.shop-concon {
  background-color: #fff;
  padding: 0.2rem;
  margin-bottom: 3rem;
}

.shop-infor {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.shop-infor img {
  width: 2.16rem;
  height: 2.16rem;
}
.inf-txt p {
  margin-bottom: 0.1rem;
}
.inf-txt p:first-child {
  font-size: 0.32rem;
  color: #333333;
  line-height: 0.32rem;
}
.inf-txt p:nth-child(2) {
  font-size: 0.28rem;
  color: #999999;
  line-height: 0.28rem;
  margin-bottom: 0.3rem;
}
.inf-txt p:nth-child(3) {
  width: 1.48rem;
  height: 0.36rem;
  background: #f2f2f2;
  border-radius: 1px;
  font-size: 0.2rem;
  color: #333333;
  line-height: 0.36rem;
  padding-left: 0.1rem;
  box-sizing: border-box;
}
.inf-txt p:nth-child(4) {
  font-size: 0.2rem;
  color: #ff6040;
  line-height: 0.2rem;
}
.money p:first-child {
  font-size: 0.4rem;
  color: #ff6040;
  line-height: 0.4rem;
}
.money p:first-child e {
  font-size: 0.2rem;
  color: #ff6040;
  line-height: 0.2rem;
}
.money p:first-child b {
  font-size: 0.2rem;
  color: #999999;
  line-height: 0.2rem;
  text-decoration: line-through;
}
.money p:last-child b {
  font-size: 0.32rem;
  color: #333333;
}
.money p:last-child span {
  display: inline-block;
  background: #f2f2f2;
  border-radius: 1px;
  width: 0.8rem;
  height: 0.4rem;
  text-align: center;
  line-height: 0.4rem;
  margin: 0 0.1rem;
  font-size: 0.28rem;
  color: #333333;
}
.money {
  display: flex;
  justify-content: space-between;
}
.money p,
.money p:last-child {
  margin: 0;
}
.shop-infor:last-child {
  margin-bottom: 0;
}
footer {
  height: 2.64rem;
  padding: 0;
}
.shop-all {
  display: flex;
  justify-content: space-between;
  padding: 0 0 0 0.2rem;
  background-color: #fff;
  height: 0.98rem;
  align-items: center;
  box-shadow: 0 0 0 0 #cccccc;
}
.allmoeny {
  display: flex;
  justify-content: space-between;
}
.qx {
  width: 2.2rem;
  text-align: left;
}
.js {
  width: 2.2rem;
  height: 0.98rem;
  font-size: 0.32rem;
  color: #ffffff;
  text-align: center;
  line-height: 0.98rem;
  background: #ff6040;
}
.allmoeny-left {
  text-align: left;
  font-size: 0.32rem;
  color: #333333;
  line-height: 0.4rem;
  margin-right: 0.4rem;
}
.allmoeny-right {
  text-align: right;
  font-size: 0.4rem;
  color: #ff6040;
  line-height: 0.4rem;
}
.allmoeny-right p:last-child,
.allmoeny-left p:last-child {
  font-size: 0.2rem;
  color: #999999;
  line-height: 0.2rem;
}
/* .foot-top div {
    padding-top: .2rem;
}
.foot-top{
border-top: 1px solid #ccc;
} */
</style>
